<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card shadow="hover" class="mgb20" style="height:252px;" v-if="rolesId == 5">
          <div class="user-info">
            <img src="../../assets/img/jie.png" class="user-avator" alt="">
            <div class="user-info-cont">
              <div class="user-info-name">商户贷</div>
              <div>客服电话：4001116120</div>
            </div>
            <!-- <el-button type="primary" to="/tabs">主要按钮</el-button> -->
            <el-button type="danger" size='medium' @click="See()" v-if="jsyStatus == 0 || jsyStatus == 3 || jsyStatus == 4">我要借款</el-button>
            <el-button type="danger" size='medium' disabled v-if="jsyStatus == 1">等待审核</el-button>
            <router-link to="/loanProducts" class="link-button" v-if="jsyStatus == 2">选择产品</router-link>
            <span @click="See()" class="link-button" v-if="jsyStatus == 8">去提现</span>
            <router-link to="/reimbursementList" class="link-button" v-if="jsyStatus == 7 || jsyStatus == 8">还款计划</router-link>
          </div>
          <div class="statistical">
            <div class="statisticalitem">
              <div>2步</div>
              <div><span class="red">提交资料</span></div>
            </div>
            <div class="statisticalitem">
              <div>0.03%</div>
              <div><span class="red">最低利率</span></div>
            </div>
            <div class="statisticalitem">
              <div>24小时</div>
              <div><span class="red">最快放款</span></div>
            </div>
            <div class="statisticalitem">
              <div>50万</div>
              <div><span class="red">最高额度</span></div>
            </div>
          </div>
          <div class="link-bottom">* 本服务由极速云|极速借及其合作金融机构提供</div>
          <!-- <div class="user-info-list">上次登录时间：<span>2019-01-01</span></div>
                    <div class="user-info-list">上次登录地点：<span>武汉</span></div> -->
        </el-card>
        <el-card shadow="hover" class="mgb20" style="height:252px;" v-if="rolesId !== 5">
          <div class="user-info1">
            <img src="../../assets/img/shizi.jpg" alt v-if="rolesId == 1">
            <img src="../../assets/img/huli.jpg" alt v-if="rolesId == 2">
            <img src="../../assets/img/huli.jpg" alt v-if="rolesId == 3">
            <img src="../../assets/img/huanxiong.jpg" alt v-if="rolesId == 4">
            <img src="../../assets/img/xiongmao.jpg" alt v-if="rolesId == 5">
            <img src="../../assets/img/xiongmao.jpg" alt v-if="rolesId == 6">
            <img src="../../assets/img/lang.jpg" alt v-if="rolesId == 8">
            <img src="../../assets/img/mao.jpg" alt v-if="rolesId == 9">
            <div class="user-info-cont">
              <div class="user-info-name" v-if="rolesId !== 2 && rolesId !== 3">{{name}}</div>
              <div class="user-info-name" v-if="(rolesId == 2 || rolesId == 3) && oemFlag != 1">服务商</div>
              <div class="user-info-name" v-if="(rolesId == 2 || rolesId == 3) && oemFlag == 1">平台管理员</div>
              <!-- <div>{{role}}</div> -->
            </div>
          </div>
          <div class="user-info-list">当前时间：<span>{{nowTime}}</span></div>
          <!-- <div class="user-info-list">登录地点：<span>武汉</span></div> -->
        </el-card>
        <el-card shadow="hover" style="height:252px;" v-if="rolesId == 5 || rolesId == 6">
          <div slot="header" class="clearfix">
            <span>支付方式</span>
          </div>
          微信
          <el-progress :percentage="wxTotal" color="#42b983" :width='120'></el-progress>
          支付宝
          <el-progress :percentage="aliTotal"></el-progress>
          云闪付
          <el-progress :percentage="uniTotal"></el-progress>
          银行卡
          <el-progress :percentage="bankTotal" color="#f1e05a"></el-progress>
          <!-- 其它
                    <el-progress :percentage="0.9" color="#f56c6c"></el-progress> -->
        </el-card>
        <el-card shadow="hover" style="height:252px;" v-if="rolesId == 1 || rolesId == 2 || rolesId == 3 || rolesId == 4 || rolesId == 8 || rolesId == 9">
          <div class="paimbox">
            <span class="span1">总商户数：</span>
            <span class="span2">{{total}} 家</span>
          </div>
          <div class="paimbox">
            <span class="span1">今日新增商户数：</span>
            <span class="span2">{{newtotal}} 家</span>
          </div>
          <div class="paimbox">
            <span class="span1">动销商户数：</span>
            <span class="span3">{{activeCount}} 家</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-row :gutter="20" class="mgb20" v-if="rolesId == 5 || rolesId == 6">
          <el-col :span="8">
            <el-card shadow="hover" :body-style="{padding: '0px'}">
              <div class="grid-content grid-con-1">
                <i class="el-icon-lx-people grid-con-icon"></i>
                <div class="grid-cont-right">
                  <div class="grid-num">{{todayTotalFee}}</div>
                  <div>今日总交易金额</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover" :body-style="{padding: '0px'}">
              <div class="grid-content grid-con-2">
                <i class="el-icon-lx-notice grid-con-icon"></i>
                <div class="grid-cont-right">
                  <div class="grid-num">{{todayTotal}}</div>
                  <div>今日总交易笔数</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover" :body-style="{padding: '0px'}">
              <div class="grid-content grid-con-3">
                <i class="el-icon-lx-goods grid-con-icon"></i>
                <div class="grid-cont-right">
                  <div class="grid-num">{{todayFee}}</div>
                  <div>总手续费</div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="mgb20" v-if="rolesId == 1 || rolesId == 2 || rolesId == 3 || rolesId == 4 || rolesId == 8 || rolesId == 9">
          <el-col :span="8">
            <el-card shadow="hover" :body-style="{padding: '0px'}">
              <div class="grid-content grid-con-1">
                <i class="el-icon-lx-people grid-con-icon"></i>
                <div class="grid-cont-right">
                  <div class="grid-num">{{todayTotalFee}}</div>
                  <div>今日总交易金额</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover" :body-style="{padding: '0px'}">
              <div class="grid-content grid-con-2">
                <i class="el-icon-lx-notice grid-con-icon"></i>
                <div class="grid-cont-right">
                  <div class="grid-num">{{todayTotal}}</div>
                  <div>今日总交易笔数</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover" :body-style="{padding: '0px'}">
              <div class="grid-content grid-con-3">
                <i class="el-icon-lx-goods grid-con-icon"></i>
                <div class="grid-cont-right">
                  <div class="grid-num">{{todayFee}}</div>
                  <div>今日手续费</div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-card shadow="hover" style="height:403px;" v-if="rolesId == 1 || rolesId == 2 || rolesId == 3 || rolesId == 4 || rolesId == 8 || rolesId == 9">
          <div slot="header" class="clearfix">
            <span>今日商户交易排行</span>
            <!-- <el-button style="float: right; padding: 3px 0" type="text">添加</el-button> -->
          </div>
          <el-table ref="multipleTable" :data="todoList" tooltip-effect="dark" style="width: 100%">
            <el-table-column type="index" align="center" width='50' label="排行"></el-table-column>
            <el-table-column align="center" label="商户名">
              <template slot-scope="scope">
                <div class="todo-item" :class="{'todo-item-del': scope.row.status}">{{scope.row.merchantShortName}}</div>
              </template>
            </el-table-column>
            <el-table-column width="150" align="center" label="交易总金额">
              <template slot-scope="scope">
                <span style="color:#FC6FA1"> {{scope.row.totalFee}} </span>
                <span> 元 </span>
                <!-- <i class="el-icon-edit"></i>
                                <i class="el-icon-delete"></i> -->
              </template>
            </el-table-column>
            <el-table-column align="center" label="交易总笔数">
              <template slot-scope="scope">
                <span style="color:#64d572"> {{scope.row.total}} </span>
                <span> 笔 </span>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
        <el-card shadow="hover" style="height:403px;" v-if="rolesId == 5">
          <div slot="header" class="clearfix">
            <span>今日门店交易排行</span>
            <!-- <el-button style="float: right; padding: 3px 0" type="text">添加</el-button> -->
          </div>
          <el-table ref="multipleTable" :data="todoList1" tooltip-effect="dark" style="width: 100%">
            <el-table-column type="index" align="center" width='50' label="排行"></el-table-column>
            <el-table-column align="center" label="门店名">
              <template slot-scope="scope">
                <div class="todo-item" :class="{'todo-item-del': scope.row.status}">{{scope.row.shopName}}</div>
              </template>
            </el-table-column>
            <el-table-column width="150" align="center" label="交易总金额">
              <template slot-scope="scope">
                <span style="color:#FC6FA1"> {{scope.row.totalFee}} </span>
                <span> 元 </span>
                <!-- <i class="el-icon-edit"></i>
                                <i class="el-icon-delete"></i> -->
              </template>
            </el-table-column>
            <el-table-column align="center" label="交易总笔数">
              <template slot-scope="scope">
                <span style="color:#64d572"> {{scope.row.total}} </span>
                <span> 笔 </span>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
        <el-card shadow="hover" style="height:403px;" v-if="rolesId == 6">
          <div slot="header" class="clearfix">
            <span>终端分类及个数</span>
            <!-- <el-button style="float: right; padding: 3px 0" type="text">添加</el-button> -->
          </div>
          <el-table ref="multipleTable" :data="todoList2" tooltip-effect="dark" style="width: 100%">
            <el-table-column align="center" label="终端类型">
              <template slot-scope="scope">
                <div class="todo-item" :class="{'todo-item-del': scope.row.status}">{{scope.row.typeName}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="数量">
              <template slot-scope="scope">
                <span style="color:#FC6FA1"> {{scope.row.total}} </span>
                <span> 个 </span>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-card shadow="hover">
          <schart ref="bar" class="schart" canvasId="bar" :data="data1" type="bar" :options="options" v-if="rolesId == 1 || rolesId == 2 || rolesId == 3 || rolesId == 4 || rolesId == 8 || rolesId ==9"></schart>
          <schart ref="bar" class="schart" canvasId="bar" :data="data3" type="bar" :options="options3" v-if="rolesId == 5 || rolesId == 6 "></schart>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover">
          <schart ref="line" class="schart" canvasId="line" :data="data" type="line" :options="options2" v-if="rolesId == 1 || rolesId == 2 || rolesId == 3 || rolesId == 4 || rolesId == 8 || rolesId == 9"></schart>
          <schart ref="line" class="schart" canvasId="line" :data="data4" type="line" :options="options4" v-if="rolesId == 5 || rolesId == 6 "></schart>
        </el-card>
      </el-col>
    </el-row>
    <!-- 修改登录密码 -->
    <el-dialog v-dialogDrag title="修改登录密码" :visible.sync="visible" width="30%" :close-on-press-escape='false' :close-on-click-modal="false" :show-close="false">
      <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
        <el-form-item label="请输入原密码" prop="oldpass">
          <el-input type="password" v-model="ruleForm2.oldpass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="请输入新密码" prop="pass">
          <el-input type="password" v-model="ruleForm2.pass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input type="password" v-model="ruleForm2.checkPass" autocomplete="off"></el-input>
        </el-form-item>
        <div class="tip">*当前是默认密码，为确保账号安全请及时修改密码</div>
        <!-- <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
            <el-button @click="resetForm('ruleForm2')">重置</el-button>
          </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm('ruleForm2')">重置</el-button>
        <!-- @click="visible = false" -->
        <el-button type="primary" @click="submitForm('ruleForm2')">确定修改</el-button>
      </span>
    </el-dialog>
  </div>
</template>



<script>
import Schart from 'vue-schart';
import bus from '../common/bus';
import md5 from "js-md5";
import { modifypassword, getLastWeekStatisticChart, getMerStatisticRank, getCountsByPayType, getMerCountInfo, getShopStatisticRank, getStatisticByRole, getShopTerminals, jsyMer, jsyMerPost,getBdChart } from '@/api/api';
export default {
  name: 'dashboard',
  data () {
    let oldpass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      }
      callback();
    };
    let validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.ruleForm2.checkPass !== '') {
          this.$refs.ruleForm2.validateField('checkPass');
        }
        callback();
      }
    };
    let validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm2.pass) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      ruleForm2: {
        pass: '',
        checkPass: '',
        oldpass: ''
      },
      rules2: {
        oldpass: [
          { validator: oldpass, trigger: 'blur' }
        ],
        pass: [
          { validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' }
        ],
      },
      tagsList: [],
      rolesId: '',
      username: '',//商户号
      name: '',
      visible: false,
      nowTime: '',
      wxTotal: 0,
      aliTotal: 0,
      bankTotal: 0,
      activeCount: 0,
      todayTotalFee: 0,//今日总交易额
      todayTotal: 0,//今日总交易笔数
      todayProfit: 0,//今日分润
      todayFee: 0,//今日手续费
      total: 0,
      newtotal: 0,
      todoList: [],
      todoList1: [], //门店交易排行数据
      todoList2: [], //门店下终端
      data: [{
        name: '',
        value: 0
      }
      ],
      data1: [{
        name: '',
        value: 0
      }
      ],
      data3: [{
        name: '',
        value: 0
      }
      ],
      data4: [{
        name: '',
        value: 0
      }
      ],
      options: {
        title: '业态交易额',
        showValue: false,
        fillColor: 'rgb(45, 140, 240)',
        bottomPadding: 30,
        topPadding: 30
      },
      options2: {
        title: '近七天交易总金额趋势',
        fillColor: '#FC6FA1',
        axisColor: '#008ACD',
        contentColor: '#EEEEEE',
        bgColor: '#F5F8FD',
        bottomPadding: 30,
        leftPadding: 80,
        topPadding: 30
      },
      options3: {
        title: '近七天交易总笔数趋势',
        showValue: false,
        fillColor: 'rgb(45, 140, 240)',
        bottomPadding: 30,
        topPadding: 30
      },
      options4: {
        title: '近七天交易总金额趋势',
        fillColor: '#FC6FA1',
        axisColor: '#008ACD',
        contentColor: '#EEEEEE',
        bgColor: '#F5F8FD',
        bottomPadding: 30,
        leftPadding: 80,
        topPadding: 30
      },
      jsyStatus: "",//极速云 按钮状态
      qj_url: 'http://jie2.test.jisucloud.cn/partner/entry',
      oeminfo: '',
      oemFlag: ''
    }
  },
  components: {
    Schart
  },
  computed: {
    role () {
      return this.name === 'admin' ? '超级管理员' : '普通用户';
    }
  },
  created () {
    this.nowTimes();
    this.getPermissions();
    this.handleListener();
    this.changeDate();
    // this.timeFormate();
    if (this.$route.query.initial == '1') {
      this.$confirm('为了您的账户安全，请及时修改密码', '提示', {
        confirmButtonText: '好的',
        type: 'warning'
      }).then(() => {

      }).catch(() => {
        // this.$message({
        //     type: 'info',
        //     message: '已取消'
        // });          
      });
    } else if (this.$route.query.initial == '2') {
      this.visible = true
    }
    this.oeminfo = JSON.parse(sessionStorage.getItem('oeminfo'))
    this.oemFlag = sessionStorage.getItem('oemFlag')
  },

  mounted () {
    this.getStatisticByRole()
    this.getLastWeekStatisticChart();
    if (this.rolesId == 1 || this.rolesId == 2 || this.rolesId == 3 || this.rolesId == 4 || this.rolesId == 8 || this.rolesId == 9) {
      this.getMerStatisticRank();
      this.getMerCountInfo();
      this.getBdChart()
    }
    if (this.rolesId == 5 || this.rolesId == 6) {
      this.getShopStatisticRank()
      this.getCountsByPayType();
      this.getShopTerminals();
    }
    if (this.rolesId == 5) {
      // this.nowTimes()
      this.jsyMer()
    }


  },
  activated () {
    this.handleListener();
  },
  deactivated () {
    window.removeEventListener('resize', this.renderChart);
    bus.$off('collapse', this.handleBus);
  },
  methods: {
    //获取权限
    getPermissions () {
      var aaa = sessionStorage.getItem('userInfo')
      var bbb = JSON.parse(aaa)
      this.rolesId = bbb.rolesId
      // this.serviceinfo.state = this.rolesId
      // this.fid = bbb.fid
      // this.mid = bbb.mid
      this.name = bbb.rolesName
      this.username = bbb.username
      // console.log(bbb)
    },
    changeDate () {
      // const now = new Date().getTime();
      // this.data1.forEach((item, index) => {
      //     const date = new Date(now - (6 - index) * 86400000);
      //     item.name = `${date.getFullYear()}/${date.getMonth()+1}/${date.getDate()}`
      // })
    },
    handleListener () {
      bus.$on('collapse', this.handleBus);
      // 调用renderChart方法对图表进行重新渲染
      window.addEventListener('resize', this.renderChart)
    },
    handleBus (msg) {
      setTimeout(() => {
        this.renderChart()
      }, 300);
    },
    renderChart () {
      // this.$refs.bar.renderChart();
      // this.$refs.line.renderChart();
    },
    //获取近七天交易数据
    getLastWeekStatisticChart () {
      getLastWeekStatisticChart({}).then(res => {
        // console.log(res)
        this.data = []
        this.data4 = []
        this.data3 = []
        let newarr = res.data.map((item,index,arr) =>{
          let json = {}
          json.value = item.totalFee
          json.name = this.formatDate(item.tradeDate)
          return json
        })
        this.data = newarr
        this.data3 = newarr
        this.data4 = newarr
      })
    },
    //获取商户排行
    getMerStatisticRank () {
      getMerStatisticRank({}).then(res => {
        console.log(res)
        if (res.code == 405) {
          sessionStorage.removeItem('token')
          this.$router.push('/login');
        } else {
          this.todoList = res.data
        }
      })
    },
    //获取支付方式笔数
    getCountsByPayType () {
      getCountsByPayType({}).then(res => {
        if (res.code == 405) {
          sessionStorage.removeItem('token')
          this.$router.push('/login');
        } else {
          // console.log(res) 
          if (res.data.total !== null && res.data.total !== 0) {
            let wxTotal = res.data.wxTotal / (res.data.total) * 100
            let aliTotal = res.data.aliTotal / (res.data.total) * 100
            let bankTotal = res.data.bankTotal / (res.data.total) * 100
            this.wxTotal = Math.round(wxTotal * 10) / 10
            this.aliTotal = Math.round(aliTotal * 10) / 10
            this.bankTotal = Math.round(bankTotal * 10) / 10
          } else if (res.data.total == null && res.data.total == 0) {
            this.wxTotal = 0
            this.aliTotal = 0
            this.bankTotal = 0
          }
        }

      })
    },
    //获取新增商户量
    getMerCountInfo () {
      getMerCountInfo({}).then(res => {
        this.total = res.data.total
        this.activeCount = res.data.activeCount
        console.log(res)
        // this.data1 = []
        // for (var i = 0; i < res.data.newCountList.length; i++) {
        //   this.data1.push({ value: res.data.newCountList[i].newCount, name: this.formatDate(res.data.newCountList[i].tradeDate) })
        //   this.newtotal = res.data.newCountList[6].newCount
        // }
      })
    },
    formatDate (d) {
      if (d) {
        let arr = d.split('-')
        if (arr.length > 2) {
          return arr[1] + '-' + arr[2]
        }
        return ''
      }
      return ''
    },
    //获取 商户登陆 门店交易排行
    getShopStatisticRank () {
      getShopStatisticRank({}).then(res => {
        if (res.code == 405) {
          sessionStorage.removeItem('token')
          this.$router.push('/login');
        } else {
          this.todoList1 = res.data
        }
      })
    },
    //获取 总交易金额
    getStatisticByRole () {
      getStatisticByRole({}).then(res => {
        console.log(res)
        if (res.code == 405) {
          sessionStorage.removeItem('token')
          this.$router.push('/login');
        } else {
          this.todayTotalFee = res.data.totalFee
          this.todayTotal = res.data.total
          this.todayFee = res.data.fee
          this.todayProfit = res.data.profit
        }
      })
    },
    //获取门店下终端
    getShopTerminals () {
      getShopTerminals({}).then(res => {
        if (res.code == 405) {
          sessionStorage.removeItem('token')
          this.$router.push('/login');
        } else {
          console.log(res)
          this.todoList2 = res.data
        }
      })
    },
    //获取极速云按钮状态
    jsyMer () {
      jsyMer({}, this.username).then(res => {
        if (res.code == 405) {
          sessionStorage.removeItem('token')
          this.$router.push('/login');
        } else {
          console.log(res.message)
          if (res.message == 'unauth') {
            this.jsyStatus = 0
          } else {
            this.jsyStatus = res.data.merchantJsy.jsyStatus
            // this.jsyStatus = 7
          }
        }
      })
    },
    jsyMerPost () {
      jsyMerPost({}, this.username).then(res => {
        if (res.code == 405) {
          sessionStorage.removeItem('token')
          this.$router.push('/login');
        } else {
          console.log('调用了')
        }
      })
    },
    See () {
      this.jsyMerPost()
      // let url = 'http://jie2.test.jisucloud.cn/partner/entry'
      // let url = 'http://m.test.jisucloud.cn/partner/entry'
      let url = 'https://jie.jisujie.com/partner/entry'
      // let key = "4c9db51879546ea1605a4e4ad2c1e3ae"
      let key = "718afc3c29f92af7c8f26ba0c3b26c75"
      const now = new Date().getTime()
      let partner = 'partner=shoubei#$&ts=' + now + '#$&uid=' + this.username + '#$&key=' + key
      let sign = md5(partner)
      console.log(url + '?ts=' + now + '&partner=shoubei&uid=' + this.username + '&sign=' + sign)
      window.open(url + '?ts=' + now + '&partner=shoubei&uid=' + this.username + '&sign=' + sign);
      // let address = url +'?ts='+ now +'&partner=shoubei&uid='+ this.username + '&sign=' + sign 
      // window.location.href = address
      // "http://jie2.test.jisucloud.cn/partner/entry?ts=1557134675987&partner=shoubei&uid=851904240001&sign=1726bdca0aabc1dd077c6f8aeac01ca6"
      // window.open("http://jie2.test.jisucloud.cn/partner/entry?ts=1557133776837&partner=shoubei&uid=851811130002&sign=4f24acec1c92a6db1be3df92775c7c87")
    },
    timeFormate (timeStamp) {
      var that = this;
      clearInterval(that.timer);
      let year = timeStamp.getFullYear();
      let month = timeStamp.getMonth() + 1 < 10 ? "0" + (timeStamp.getMonth() + 1) : timeStamp.getMonth() + 1;
      let date = timeStamp.getDate() < 10 ? "0" + timeStamp.getDate() : timeStamp.getDate();
      let hh = timeStamp.getHours() < 10 ? "0" + timeStamp.getHours() : timeStamp.getHours();
      let mm = timeStamp.getMinutes() < 10 ? "0" + timeStamp.getMinutes() : timeStamp.getMinutes();
      let ss = timeStamp.getSeconds() < 10 ? "0" + timeStamp.getSeconds() : timeStamp.getSeconds();
      this.nowTime = year + "-" + month + "-" + date + " " + hh + ":" + mm + ":" + ss;
    },
    // 定时器函数
    nowTimes () {
      var that = this;
      this.timeFormate(new Date());
      that.timer = setInterval(that.nowTimes, 1000);
    },
    task () {
      setInterval(this.updateechart, 1000 * 60);
    },
    resetForm (formName) {
      this.$refs[formName].resetFields();
    },
    // 修改密码
    submitForm (formName) {
      if (this.ruleForm2.pass.length < 6) {
        this.$message.error('密码长度不得小于6位');
      } else {
        let userinfo = JSON.parse(sessionStorage.getItem("userInfo"));
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // alert('submit!');
            modifypassword({
              oldPassword: md5(this.ruleForm2.oldpass),
              newPassword: md5(this.ruleForm2.pass)
            }, userinfo.id).then(res => {
              // console.log(res)
              if (res.code == 405) {
                sessionStorage.removeItem('token')
                this.$router.push('/login');
              } else if (res.code == 500) {
                // this.visible = false
                this.$message.error(res.message);
                this.$refs[formName].resetFields();
              } else if (res.code == 200) {
                this.$message({
                  message: '修改成功',
                  type: 'success'
                });
                sessionStorage.removeItem('token')
                this.$router.push('/login');
                this.visible = false;
                this.$refs[formName].resetFields();
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }

    },
    // 业态交易额
    getBdChart () {
      getBdChart({}).then(res => {
        console.log(res)
        this.data1 = []
        let newarr = res.data.map((item,index,arr) =>{
          let json = {}
          json.value = item.bdTotalFee/100
          json.name = item.bdName
          return json
        })
        this.data1 = newarr
      })
    },

  }
}

</script>


<style scoped lang='less'>
.el-row {
  margin-bottom: 20px;
}

.grid-content {
  display: flex;
  align-items: center;
  height: 100px;
}

.grid-cont-right {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #999;
}

.grid-num {
  font-size: 30px;
  font-weight: bold;
}

.grid-con-icon {
  font-size: 50px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  color: #fff;
}

.grid-con-1 .grid-con-icon {
  background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
  color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
  background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
  color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
  background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
  color: rgb(242, 94, 67);
}

.user-info {
  display: flex;
  align-items: center;
  /* padding-bottom: 20px; */
  /* border-bottom: 2px solid #ccc; */
  /* margin-bottom: 20px; */
}
.user-info1 {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 2px solid #ccc;
  margin-bottom: 20px;
}
.user-avator1 {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}

.user-avator {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.user-info-cont {
  padding-left: 15px;
  flex: 1;
  font-size: 14px;
  color: #999;
  font-weight: 600;
}

.user-info-cont div:first-child {
  font-size: 22px;
  color: #222;
}
.link-button {
  width: 120px;
  height: 40px;
  color: #fff;
  text-align: center;
  line-height: 40px;
  background-color: rgb(252, 104, 127);
  border-radius: 4px;
  margin-left: 10px;
}
.user-info-list {
  font-size: 14px;
  color: #999;
  line-height: 25px;
}

.user-info-list span {
  margin-left: 70px;
}

.mgb20 {
  margin-bottom: 20px;
}

.todo-item {
  font-size: 14px;
}

.todo-item-del {
  text-decoration: line-through;
  color: #999;
}

.schart {
  width: 100%;
  height: 300px;
}
.paimbox {
  width: 100%;
  height: 83px;
}
.paimbox .span1 {
  color: #999;
  font-size: 20px;
  font-weight: bold;
  /* float: left; */
  margin-left: 20px;
}
.paimbox .span2 {
  color: rgb(45, 140, 240);
  font-size: 20px;
  font-weight: bold;
}
.paimbox .span3 {
  color: rgb(242, 94, 67);
  font-size: 20px;
  font-weight: bold;
}
.statistical {
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
  align-items: center;
  // background: #374459;
  color: #222;
  padding: 12px;
  box-sizing: border-box;
  .statisticalitem {
    flex: 1;
    text-align: center;
    border-right: 2px solid #ccc;
    font-size: 18px;
    line-height: 180%;
    font-weight: 600;
    &:nth-last-child(1) {
      border-right: none;
    }
    .red {
      // color: #f9607d;
      font-size: 14px;
    }
  }
}
.link-bottom {
  width: 100%;
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin-top: 10px;
  color: #999;
}

.tip {
  font-size: 14px;
  padding: 5px;
  box-sizing: border-box;
  color: red;
}
</style>
